import 'package:eyepetizer_example/model/discovery/topic_detail_model.dart';
import 'package:eyepetizer_example/state/base_state.dart';
import 'package:eyepetizer_example/utils/cache_image.dart';
import 'package:eyepetizer_example/widget/app_bar.dart';
import 'package:eyepetizer_example/widget/discovery/topic_detail_item_widget.dart';
import 'package:flutter/material.dart';

import '../../viewmodel/discovery/topic_detail_viewmodel.dart';

class TopicDetailPage extends StatefulWidget {

  final int detailId;
  const TopicDetailPage({Key? key, required this.detailId}) : super(key: key);

  @override
  State<TopicDetailPage> createState() => _TopicDetailPageState();
}

class _TopicDetailPageState extends BaseState<TopicDetailViewModel, TopicDetailPage> {
  @override
  Widget getContentChild(TopicDetailViewModel model) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBar(model.topicDetailModel.brief??""),
      body: CustomScrollView(
        slivers: [
          _headWidget(model.topicDetailModel),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return TopicDetailItemWidget(model: model.itemList[index]);
                },
              childCount: model.itemList.length
            ),
          )
        ],
      ),
    );
  }

  @override
  TopicDetailViewModel get viewModel => TopicDetailViewModel(widget.detailId);

  Widget _headWidget(TopicDetailModel topicDetailModel) {
    // CustomScrollView只能包含sliver系列组件，如果包含普通的组件则需要使用SliverToBoxAdapter包裹
    return SliverToBoxAdapter(
      child: Stack(
        children: [
          Column(
            children:  [
              cacheImage(
                  topicDetailModel.headerImage??"",
                  width: MediaQuery.of(context).size.width,
                  height: 250
              ),
              // 图片的文字介绍
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 40, 20, 10),
                child: Text(
                  topicDetailModel.text ?? "",
                  style: const TextStyle(fontSize: 12, color: Color(0xff9a9a9a)),
                ),
              ),
              Container(
                height: 5,
                color: Colors.black12,
              )
            ],
          ),
          //图片的title
          Positioned(
            left: 20,right: 20,top: 230,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 50,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                // 背景色
                color: Colors.white,
                // 边框设置
                border: Border.all(color: const Color(0xFFF5F5F5)),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                topicDetailModel.brief??"",
                style: const TextStyle(
                    fontSize: 14,
                    color: Colors.black,
                    fontWeight: FontWeight.bold),
              ),
            ),
          )
        ],
      ),
    );
  }
  
}
